<template>
	<div class="footer">
		<div class="icp">
			<a class="icp_href" href="https://beian.miit.gov.cn" target="_blank">冀ICP备2023002768号-1</a>
		</div>
		<div class="beian">
			<img class="beian_icon" src="@/assets/img/icon/ICP.png" />
			<a
				class="beian_link"
				target="_blank"
				href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=13058102000472"
				>冀公网安备 13058102000472号</a
			>
		</div>
	</div>
	<div class="fixed">
		<div class="home" @click="handleHomeClick">
			<img src="@/assets/img/icon/home-fill.svg" alt="首页" class="home_svg" />
		</div>
	</div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()
function handleHomeClick() {
	router.push('/')
	document.title = '前端技术博客'
	window.scrollTo(0, 0)
}
</script>

<style lang="less" scoped>
@import url('@/assets/css/constants.less');

.footer {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin-top: 100px;
	width: 100%;
	height: 120px;
	background: @cardBackGround;
	backdrop-filter: @backdropFilter;
	box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
	.beian {
		margin-top: 15px;
		.beian_icon {
			vertical-align: middle;
			margin-right: 10px;
		}
		.beian_link {
			color: rgb(58, 58, 58);
		}
	}
	.icp_href {
		color: rgb(58, 58, 58);
	}
}

.fixed {
	position: fixed;
	z-index: 9999;
	bottom: 40px;
	left: 40px;
	color: #fff;
	letter-spacing: 1px;
	text-align: center;
	.home {
		width: 50px;
		height: 50px;
		background: linear-gradient(135deg, #3f5bfa, #ab76ff);
		border-radius: 10px;
		padding: 10px;
		cursor: pointer;
	}
	.home_svg {
		width: 30px;
	}
	.fixed_btn {
		text-align: center;
		background: linear-gradient(90deg, #3f5bfa, #ab76ff);
		padding: 10px;
		border-radius: 20px;
		cursor: pointer;
	}
}
</style>
